/* eslint-disable jsx-a11y/alt-text */
import React from "react";
import { Button } from "antd-mobile";
import { withRouter } from "react-router-dom";
import storage from "@/utils/storage.js";
import { Toast } from "antd-mobile";
import "./hjTabBar.less";
class HjTabBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  static defaultProps = {
    selectedTab: "",
  };
  render() {
    let { advanceFlag, loanFlag, order } = this.props;
    return (
      <div>
        {advanceFlag == "0" ? (
          <div className="bottom  flex flex-between flex-column-center">
            <div>
              <p>可预支金额(元)</p>
              <p>
                <strong className="ft-22">
                  {order.amount || order.limitAmount}
                </strong>{" "}
                元
              </p>
            </div>
            <Button
              type="primary"
              size="small"
              className="ft-14"
              onClick={() => {
                let userInfo = storage.get("userInfo");
                if(userInfo!= null){
                  this.props.history.push("advance");
                }else{
                  Toast.info("信息有误,不能进行预支");
                }
               
              }}
              style={{
                borderRadius: "1rem",
                width: "2rem",
                height: "1rem",
                lineHeight: "1rem",
              }}
            >
              去预支
            </Button>
          </div>
        ) : (
            ""
          )}
        {advanceFlag == "1" && loanFlag == "0" ? (
          <div>
            {order.orderStatus == "20" || order.orderStatus == "30" || order.orderStatus == "10" ? (
              <div className="bottom   flex flex-between flex-column-center">
                <div>
                  <p>
                    <strong className="ft-22">
                      {order.amount || order.limitAmount}
                    </strong>
                    元
                  </p>
                  <p>可预支金额(元)</p>
                </div>
                <div>
                  <p>
                    <strong className="ft-22">{order.day}</strong>
                  </p>
                  <p>预支期限</p>
                </div>
                <div>
                  <p>
                    <strong className="ft-22">
                      {order.orderStatus == "30" ? "还款待审核" : "申请中"}
                    </strong>
                  </p>
                  <p>预支状态</p>
                </div>
              </div>
            ) : (
                <div
                  className="bottom   flex flex-between flex-column-center"
                  onClick={() => {
                    let userInfo = storage.get("userInfo");
                    if(userInfo!= null){
                      this.props.history.push(`previewRecordDetail?id=${order.id}`);
                    }else{
                      Toast.info("信息有误,不能进行还款");
                    }
                   
                  }}
                >
                  <div>
                    <p>
                      <strong className="ft-22">{order.amount}</strong> 元
                  </p>
                    <p>预支金额</p>
                  </div>
                  <div>
                    <p>
                      <strong className="ft-22">{order.day}</strong>
                    </p>
                    <p>预支期限</p>
                  </div>
                  <Button
                    type="primary"
                    size="small"
                    className="ft-14"
                    style={{
                      borderRadius: "1rem",
                      width: "2.5rem",
                      height: "1rem",
                      lineHeight: "1rem",
                    }}
                  >
                    立即还款
                </Button>
                </div>
              )}
          </div>
        ) : (""
            // <div>
            //   <div
            //     className="bottom   flex flex-between flex-column-center"
            //     onClick={() => {
            //       this.props.history.push(`previewRecordDetail?id=${order.id}`);
            //     }}
            //   >
            //     <div>
            //       <p>
            //         <strong className="ft-22">{order.amount}</strong> 元
            //       </p>
            //       <p>预支金额</p>
            //     </div>
            //     <div>
            //       <p>
            //         <strong className="ft-22">{order.day}</strong>
            //       </p>
            //       <p>逾期天数</p>
            //     </div>
            //     <Button
            //       type="primary"
            //       size="small"
            //       className="ft-14"
            //       style={{
            //         borderRadius: "1rem",
            //         width: "2.5rem",
            //         height: "1rem",
            //         lineHeight: "1rem",
            //       }}
            //     >
            //       立即还款
            //     </Button>
            //   </div>
            // </div>
          )}
        {advanceFlag == "1" && loanFlag == "1" ? (
          <div>
            <div
              className="bottom   flex flex-between flex-column-center"
              onClick={() => {
                let userInfo = storage.get("userInfo");
                if(userInfo!= null){
                  this.props.history.push(`previewRecordDetail?id=${order.id}`);
                }else{
                  Toast.info("信息有误,不能进行还款");
                }
              
              }}
            >
              <div>
                <p>
                  <strong className="ft-22">{order.amount}</strong> 元
                </p>
                <p>预支金额</p>
              </div>
              <div>
                <p>
                  <strong className="ft-22">{order.day}</strong>
                </p>
                <p>逾期天数</p>
              </div>
              <Button
                type="primary"
                size="small"
                className="ft-14"
                style={{
                  borderRadius: "1rem",
                  width: "2.5rem",
                  height: "1rem",
                  lineHeight: "1rem",
                }}
              >
                立即还款
              </Button>
            </div>
          </div>
        ) : (
            ""
          )}
      </div>
    );
  }
}
export default withRouter(HjTabBar);
